<script setup>
import { reactive, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { getRoleListApi,deleteRoleApi,modifyRoleApi } from "../../api/role";
const router = useRouter();
const form = reactive({
  name: "",
  desc: "",
});
onMounted(async () => {
  getTableData()
});

const getTableData = async () => {
  const data = await getRoleListApi({ page: currentPage.value, count: pageSize.value });
  tableData.value = data.data.data;
  total.value = data.data.total
}
const tableData = ref([]);

//新增的点击事件
function addAction() {
  router.push({ name: "add-role" });
}

//重置按钮
function resetAction() {
  form.name = "";
  form.desc = "";
}

const multipleTableRef = ref()

const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const handleSelectionChange = () => { }
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  getTableData()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  getTableData()
}

//修改
function goEdit(id) {
  router.push({ name: "add-role", query: { id } });
  
}
// const goEdit = (id) => {
//   router.push({ name: "add-role",query: {id} });
// }

//删除
async function deleteAction(id) {
  //发生删除请求
  await deleteRoleApi({ id })
  getTableData()
}

</script>

<template>
  <el-form inline class="form">
    <el-form-item label="角色名称">
      <el-input  size="small" style="width:215px"/>
    </el-form-item>
    <div>
      <el-button type="primary" @click="searchAction">查看</el-button>
      <el-button @click="resetAction">重置</el-button>
    </div>
  </el-form>
  <el-button @click="addAction">新增</el-button>
  <el-button type="info" plain @click="BulkDeletion">批量删除</el-button>
  <!-- 管理员列表  -->
  <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%"
    class="table"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column label="角色名称" property="name" width="300">
      <template #default="scope">{{ scope.row.name }}</template>
    </el-table-column>
    <el-table-column property="desc" label="角色说明" width="300" />
    <el-table-column property="address" label="操作">
      <template #default="scope">
        <el-button size="small" @click="goEdit(scope.row._id)">编辑</el-button>
        <el-button size="small" type="danger" @click="deleteAction(scope.row._id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页器 -->
  <div class="demo-pagination-block">
    <el-pagination
      background
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </div>
</template>

<style scoped>
.form {
  display: flex;
}
.table {
  margin-top: 30px;
  margin-bottom: 20px;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>